<template>
  <div class="markdown">
    <div style="width:100%;height:auto; margin:0 auto;">
      <div>
        <table class="table">
          <tr>
            <td class="title-name">
              api名称:
            </td>
            <td class="table-content">
              <span>{{ from.tableName }}</span>
            </td>
            <td class="title-name">
              排序号:
            </td>
            <td class="table-content">
              <span>{{ from.sortNum }}</span>
            </td>
          </tr>
          <tr>
            <td class="title-name">
              备注:
            </td>
            <td colspan="3" style="100%">
              <span>{{ from.tableDetailExplain }}</span>
            </td>
          </tr>
          <tr>
            <td class="title-name">
              内容:
            </td>
          </tr>
          <tr>
            <td colspan="4" style="98%">
              <span v-html="from.htmlData" />
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { getInfo } from '@/api/dataDictoryFile'

export default {
  name: '',
  props: { // 第二种方式
    proid: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      from: {
        tableName: '',
        sortNum: '',
        tableDetailExplain: '',
        htmlData: ''
      }
    }
  },
  created() {
    this.getDetailed()
  },
  methods: {
    getDetailed() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      getInfo({ code: this.proid }).then(response => {
        this.from = response.data[0]

        loading.close()
      }).catch(function() {
        loading.close()
      })
    }
  }
}
</script>

<style>
  .table{
    border-collapse: separate;
    border-spacing: 10px 10px;
  }
  .title-name{
    width: 200px;
    text-align: left;
    vertical-align: middle;
  }
  .table-content{
    width: 350px;
  }
</style>
